<template>
<div class="container">
  <!-- 用户评论显示 -->
  <CommentList v-if='userinfo.openId'
       type='user'
       :comments="comments"></CommentList>
  <!-- 用户图书显示 -->
  <div v-if='userinfo.openId'>
    <div class="page-title">我的图书</div>
    <Card
      v-for='book in books'
      :key='book.id'
      :book='book'></Card>
    <div v-if='!books.length'>暂时还没添加过书，快去添加几本把</div>
  </div>
</div>
</template>
<script>
import {get} from '@/util'
import CommentList from '@/components/CommentList'
import Card from '@/components/Card'
export default {
  data () {
    return {
      comments: [],
      books: [],
      userinfo: {}
    }
  },
  components: {
    CommentList,
    Card
  },
  methods: {
    init () {
      //  显示滚动条
      wx.showNavigationBarLoading()
      // 获取个人评论
      this.getComments()
      // 获取自己扫描的书籍
      this.getBooks()
      // 隐藏滚动条
      wx.hideNavigationBarLoading()
    },
    async getBooks () {
      //  这里还需要修改后端接口，一般来说还是建议接口分开写的
      // 因为以前是有分页，并且加载的数据并不是根据用户来的
      const books = await get('/weapp/booklist', {
        openid: this.userinfo.openId
      })
      this.books = books.list
    },
    async getComments () {
      // 根据用户的id获取他的评论
      const comments = await get('/weapp/commentlist', {
        openid: this.userinfo.openId
      })
      this.comments = comments.list
    }
  },
  onPullDownRefresh () {
    this.init()
    wx.stopPullDownRefresh()
  },
  //  为什么不用mounted，，因为他只执行一次，所有页面只执行一次
  // onShow是小程序的生命周期，每个页面显示或者切换的时候都执行一次
  onShow () {
    if (!this.userinfo.openId) {
      let userinfo = wx.getStorageSync('userinfo')
      if (userinfo) {
        this.userinfo = userinfo
        // 用户登录了，加载它对应的数据
        this.init()
      }
    }
  }
}
</script>
<style>


</style>
